<template>
  <div>
    <a-tree
      v-model="checkedKeys"
      checkable
      :expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :selected-keys="selectedKeys"
      :tree-data="treeData"
      @expand="onExpand"
      @select="onSelect"
    >
    <template #title="{ title }">
      <a-dropdown :trigger="['contextmenu']">
        <span>{{ title }}</span>
        <TreeMenu
          slot="overlay"
          :customMenuItems="customMenuItems"
          @right-click="rightClick"
        ></TreeMenu>
      </a-dropdown>
    </template>
    </a-tree>
  </div>
</template>

<script>
// 树节点的数据
const treeData = [
  {
    title: "总系统",
    key: "0-0",
    children: [
      {
        title: "子系统",
        key: "0-0-0",
        children: [
          { title: "子系统1", key: "0-0-0-0" },
          { title: "子系统2", key: "0-0-0-1" },
          { title: "子系统3", key: "0-0-0-2" },
        ],
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          { title: "0-0-1-0", key: "0-0-1-0" },
          { title: "0-0-1-1", key: "0-0-1-1" },
          { title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
      {
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
];
import TreeMenu from "../components/TreeMenu.vue";
export default {
  components: { TreeMenu },
  data() {
    //这里存放数据
    return {
      expandedKeys: ["0-0-0", "0-0-1"],
      autoExpandParent: true,
      checkedKeys: ["0-0-0"],
      selectedKeys: [],
      treeData,
      // 自定义右键菜单项
      customMenuItems: [
        {
          title: "添加",
          key: "sub1",
          children: [
            {
              title: "设备",
              key: "1",
            },
            {
              title: "平面图",
              key: "2",
            },
            {
              title: "结构图",
              key: "3",
            },
            {
              title: "设备列表",
              key: "4",
            },
          ],
        },
        {
          title: "移动",
          key: "sub2",
          children: [
            {
              title: "上移",
              key: "5",
            },
            {
              title: "下移",
              key: "6",
            },
            {
              title: "升级",
              key: "7",
            },
            {
              title: "降级",
              key: "8",
            },
          ],
        },
        {
          title: "导出",
          key: "sub3",
          children: [
            {
              title: "设备信息",
              key: "9",
            },
            {
              title: "点位信息",
              key: "10",
            },
          ],
        },
        {
          title: "导入",
          key: "sub4",
          children: [
            {
              title: "设备信息",
              key: "11",
            },
            {
              title: "点位信息",
              key: "12",
            },
          ],
        },
        {
          title: "绑定设备定义",
          key: "sub5",
        },
      ],
    };
  },
  methods: {
    rightClick(e) {
      console.log(e);
  },
  // 点击树触发的事件
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);
      this.selectedKeys = selectedKeys;
    },
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
  },
};
</script>